<template>
  {{ arr }} <br />
  <button @click="addObj">添加</button>
  <button @click="delFun">删除</button>
  <button @click="changeFun">更新</button>
  <button @click="bianli">遍历数组</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
let arr = ref([1, 2, 3]);

//--===============

function addObj() {
  arr.value.push(4);
}

function delFun() {
  // fruits = fruits.filter(fruit => fruit !== valueToRemove);
  arr.value = arr.value.filter((item) => item !== 3);
}

function changeFun() {
  const index = arr.value.indexOf(2);
  if (index !== -1) {
    arr.value[index] = 4;
  }
}

function bianli() {
  arr.value.map((item) => {
    console.log(item);
  });
}

bianli();
</script>

<style scoped>
button {
  margin: 0 10px;
}
</style>